<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in collect" :key="index">
							<view class="swiper-item ">
								<image :src="item.litpic" class="swiper-item-img"></image>
								<text>{{item.title}}</text>
							</view>
						</swiper-item>
						
					</swiper>
				</view>
			</view>
		</view>
		 <view class="uni-padding-wrap uni-common-mt">
			<view class="uni-flex uni-row">
				 <view class="flex-item uni-bg-red">
					 <navigator url="/pages/news/newslist" open-type="switchTab" hover-class="other-navigator-hover">
					 	新闻资讯 
					 </navigator>
				     </view>
				 <view class="flex-item uni-bg-green">
					 <navigator url="/pages/product/product" open-type="switchTab" hover-class="other-navigator-hover">
					 	产品中心 
					 </navigator>
					 </view>
				 <view class="flex-item uni-bg-blue">
					 <navigator url="/pages/about" open-type="switchTab" hover-class="other-navigator-hover">
					 	关于我们 
					 </navigator>
					 </view>
				 <view class="flex-item uni-bg-blue">
					 <navigator url="/pages/contact" open-type="navigate" hover-class="other-navigator-hover">
					 	联系我们 
					 </navigator>
					 </view>
			</view>
		 </view>
		 <view class="news">
			 <view class="news-title">
				 <view class="news-title-word">新闻资讯</view>
				 <view class="news-title-more">
					<navigator url="/pages/news/newslist" open-type="switchTab" hover-class="other-navigator-hover">
						更多 
					</navigator>
				 </view>
			 </view>
			 <view class="news-item-list">
				 
				 <view class="news-item-li" @click="view('article',item.id)" v-for="(item,index) in newslist" :key="index">
					 <image class="item-img" lazy-load="true"  :src="item.litpic"></image>
					 <text class="tt">{{item.title}}</text>
				 </view>
				 
				 
			 </view>
		 </view>
		 <view class="news">
		 			 <view class="news-title">
		 				 <view class="news-title-word">产品中心</view>
		 				 <view class="news-title-more">
		 					<navigator url="/pages/product/product" open-type="switchTab" hover-class="other-navigator-hover">
		 						更多 
		 					</navigator>
		 				 </view>
		 			 </view>
		 			 <view class="news-item-list">
		 				 
		 				 <view class="news-item-li" @click="view('product',item.id)" v-for="(item,index) in productlist" :key="index">
		 					 <image class="item-img" lazy-load="true" :src="item.litpic"></image>
		 					 <text class="tt">{{item.title}}</text>
		 				 </view>
		 				 
		 				 
		 			 </view>
		 </view>
		
	</view>
</template>

<script>
	var config = require('../common/util.js');
	export default {
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            indicatorDots: true,
	            autoplay: true,
	            interval: 2000,
	            duration: 500,
				collect:[],
				newslist:[],
				productlist:[],
				pageSize:4,
	        }
	    },
		onLoad() {
			this.lunbo()
			this.article()
			this.product()
		},
		onReady() {
			
		},
		onShow(){
			
			// #ifdef MP-BAIDU
			swan.setPageInfo({
				title: '极致新闻资讯小程序',
				keywords: '极致CMS,企业建站,免费CMS,开源CMS,免费商用CMS,资讯小程序',
				description: '这是一个免费商用的极致新闻资讯小程序，赶紧来分享使用吧！',
				articleTitle: '功能强大，免费开源CMS，免费商用的小程序源码！',
				releaseDate: config.nowday(),
				image: [
					'/static/banner.png'
				],
				/*
				video: [{
					url: 'https://www.baidu.com/mx/v12.mp4',
					duration: '100',
					image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
				}],
				visit: {
					pv: '1000',
					uv: '100',
					sessionDuration: '130'
				},
				
				likes: '75',//点赞
				comments: '13',//评论
				collects: '23',//收藏
				shares: '8',//分享
				followers: '35',//关注
				*/
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			})
			// #endif
			
		},
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        },
			article(){
				var that = this;
				uni.request({
					  url: config.webapi+'/getData/index',
					  data: {
							  key:config.apikey,
							  model:'article',
							  isshow:1,
							  page:that.pageNo,
							  limit:that.pageSize,
						  },
					  success: (res) => {
						 // console.log(res.data);
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						  let len = res.data.data.length;
						  for(var i=0;i<len;i++){
							  if(res.data.data[i].litpic){
								  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
								  							 
							  }
							  
							that.newslist.push(res.data.data[i]);  
						  }
						 //that.dataList = res.data.data;
						 
						
						 
					  },
				})
			},
			lunbo(){
				var that = this;
				uni.request({
					  url: config.webapi+'/getData/index',
					  data: {
							  key:config.apikey,
							  model:'collect',
							  tid:1,
							  isshow:1,
							  page:that.pageNo,
							  limit:20,
						  },
					  success: (res) => {
						 // console.log(res.data);
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						 
						  let len = res.data.data.length;
						  for(var i=0;i<len;i++){
							  if(res.data.data[i].litpic){
								 res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
								  
							  }
							  
						  					
						  }
						 that.collect = res.data.data;
						
						
						 
					  },
				})
			},
			
			product(){
				var that = this;
				uni.request({
					  url: config.webapi+'/getData/index',
					  data: {
							  key:config.apikey,
							  model:'product',
							  isshow:1,
							  page:that.pageNo,
							  limit:that.pageSize,
						  },
					  success: (res) => {
						 // console.log(res.data);
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						  let len = res.data.data.length;
						  for(var i=0;i<len;i++){
							  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
							 
							that.productlist.push(res.data.data[i]);  
						  }
						 //that.dataList = res.data.data;
						 
						
						 
					  },
				})
			},
			
			view(model,id){
				uni.navigateTo({
					url: '/pages/detail?model='+model+'&id='+id
				});
			},
	    }
	}
</script>

<style>
	.swiper-item{
		height: 100%;
	}
	.swiper-item-img{
		width: 100%;
		height: 100%;
	}
	.news-title {
	    display: flex;
	    flex-direction: row;
		margin-top: 10px;
	}
	.news-title-word{
		    margin-left: 18px;
		    border-left: 5px solid #2f85fc;
		    padding-left: 5px;
			width: 40%;
	}
	.news-title-more{
		text-align: right;
		width: 60%;
		margin-right: 20px;
	}
	.news-item-list{
		display: flex;
		flex-direction: row;
		margin: 5px;
		flex-wrap:wrap;
		
	}
	.news-item-li{
		display: flex;
		flex-direction: column;
		padding: 0 10px;
		width:44%;
		height: 200px;
	}
	.news-item-li .tt{
		    font-size: 15px;
		    height: 60px;
	}
	.news-item-li .item-img{
		width: 100%;
		border-radius: 4px;
	}
	.news-item-li text{
		text-align: center;
	}
	
	.uni-row {
	    flex-direction: row;
	}
	.uni-flex {
	    display: flex;
	    flex-direction: row;
	}
	.flex-item {
		margin: 2px;
		    width: 25%;
		    height: 40px;
		    text-align: center;
		    line-height: 40px;
		    background: #007aff;
		    color: #fff;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
</style>